// pages/weather/weather.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    cityList: null,
    cityListType: '',
    cityScrollList: null,
    cityScrollTop: 0,
    scrollListFlag: false,
    searchFocus: false,
    searchValue: '',
    clearSearchValue: '',
    city: '获取地址中',
    weather: null,
    dayFlag: false,
    nightFlag: false,
    fList: null,
    hourScrollLeft: 0,
    selectDay: 'f1',
    hourScrollL: 0,
    indexFlag: false,
    popUpShow: false,
    popUpType: 'text',
    popUpTitle: '弹窗标题',
    popUpData: null,
    pageScrollTop: 0
  },

  /**
   * 初始化城市列表
   */
  initCityList(){
    var that = this;
    // 赋值已有数据
    that.setData({
      cityList: app.globalData.cityList
    });
    // 监听全局变量变化
    app.watch('cityList',function(value){
      if(value){
        that.setData({
          cityList: value,
          cityScrollList: Object.keys(value),
          cityListType: '省级行政区'
        });
      }
    });
    // 初始化setter
    app.globalData.cityList = that.data.cityList;
  },

  /**
   * 用户授权
   */
  authorize(){
    // 授权位置定位
    wx.authorize({
      scope: 'scope.userLocation',
      success: res=>{
        // 用户允许授权
        console.log(res);
        // 根据经纬度获取天气
        this.getWeatherByGPS();
      },
      fail: res=>{
        // 用户拒绝授权（或拒绝过）
        console.log(res);
        // 系统弹窗-引导再次授权
        wx.showModal({
          content: '检测到您没有授权精确定位，是否前往后台进行设置？',
          showCancel: true,
          success: res=>{
            // 确认再次授权
            if(res.confirm){
              // 打开授权设置页面
              wx.openSetting({
                success: res=>{
                  let isAuth =  res.authSetting['scope.userLocation'];
                  // 自定义弹窗提示
                  this.setData({
                    popUpType: 'text',
                    popUpShow: true,
                    popUpTitle: '地理位置授权',
                    popUpData: [
                        {
                          style: '',
                          value: isAuth?'授权成功':'授权失败'
                        }]
                  });
                  // 用户已授权地理位置
                  if(isAuth){
                    // 根据经纬度获取天气
                    this.getWeatherByGPS();
                  }
                  // 用户未授权地理位置
                  else{
                    // ip定位获取天气
                    this.getWeatherByIP();
                  }
                },
                fail: (err)=>{
                  console.error(err);
                  // 自定义弹窗提示
                  this.setData({
                    popUpType: 'text',
                    popUpShow: true,
                    popUpTitle: '地理位置授权',
                    popUpData: [
                        {
                          style: '',
                          value: '授权失败'
                        },{
                          style: '',
                          value: '请通过右上角设置进行授权'
                        }]
                  });
                  // ip定位获取天气
                  this.getWeatherByIP();
                }
              })
            }
            // 取消再次授权
            else{
              // ip定位获取天气
              this.getWeatherByIP();
            }
          }
        });
      }
    });
    // wx.getSetting({
    //   success(res) {
    //     if(!res.authSetting['scope.userLocation']){
    //       // 未授权位置定位
    //     }else{
    //       // 已授权位置定位
    //     }
    //   }
    // });
  },

  /**
   * ip定位-获取天气
   */
  getWeatherByIP(){
    // 方法一：通过IP获取经纬度，通过经纬度获取天气
    wx.request({
      url: 'https://apis.map.qq.com/ws/location/v1/ip',
      data:{
        key: 'FM6BZ-R3VKW-54HRX-O7HMH-FWMVJ-V2BOT'
      },
      success: res=>{
        let ip = res.data.result.ip;
        let location = res.data.result.location;
        app.globalData.ip = ip;
        app.globalData.location = location;
        app.globalData.locationType = 'IP';
        console.log(location,app.globalData.locationType,ip);
        // 用户未选择地址时
        if(this.data.city=='获取地址中'){
          // 根据经纬度获取天气
          this.getWeatherByLocation(location.lat,location.lng);
        }
      }
    });
    // 方法二：通过搜狐API获取IP，直接通过IP获取天气
    // 搜狐开放api获取ip
    // wx.request({
    //   url: 'https://pv.sohu.com/cityjson?ie=utf-8',
    //   success: res=>{
    //     var data = JSON.parse(res.data.match(/.*(\{[^\}]+\}).*/)[1] || {});
    //     // ip
    //     console.log(data.cip)
    //     // 用户未选择地址时
    //     if(this.data.city=='获取地址中'){
    //       // 根据ip获取天气
    //       wx.request({
    //         url: 'https://weather01.market.alicloudapi.com/ip-to-weather',
    //         header:{
    //           'Authorization': 'APPCODE b0eceff9476841588287706ca6819e6e'
    //         },
    //         data:{
    //           ip: data.cip,
    //           needAlarm: 1,
    //           needMoreDay: 1,
    //           need3HourForcast: 1,
    //           needIndex: 1
    //         },
    //         success: res=>{
    //           let city = res.data.showapi_res_body.cityInfo.c3;
    //           let weather = res.data.showapi_res_body;
    //           // 用户未选择地址时，重新渲染天气页面
    //           if(this.data.city=='获取地址中'){
    //             this.setData({
    //               city: city
    //             });
    //             this.collatingWeather(weather);
    //           }
    //         }
    //       });
    //     }
    //   }
    // });
  },

  /**
   * 经纬度定位-获取天气
   */
  getWeatherByGPS(){
    // 获取经纬度
    app.getLocation((lat,lng)=>{
      // 用户未选择地址时
      if(this.data.city=='获取地址中'){
        // 根据经纬度获取天气
        this.getWeatherByLocation(lat,lng);
      }
    });
  },

  /**
   * 通过经纬度坐标获取天气
   */
  getWeatherByLocation(lat,lng){
    wx.request({
      url: 'https://weather01.market.alicloudapi.com/gps-to-weather',
      header:{
        'Authorization': 'APPCODE b0eceff9476841588287706ca6819e6e'
      },
      data:{
        from: 1,
        lat: lat,
        lng: lng,
        needAlarm: 1,
        needMoreDay: 1,
        need3HourForcast: 1,
        needIndex: 1
      },
      success: res=>{
        let city = res.data.showapi_res_body.cityInfo.c3;
        let weather = res.data.showapi_res_body;
        // 用户未选择地址时，重新渲染天气页面
        if(this.data.city=='获取地址中'){
          this.setData({
            city: city
          });
          this.collatingWeather(weather);
        }
      }
    });
  },

  /**
   * 根据城市名获取天气
   */
  getWeather(city,areaid){
    this.setData({
      weather: null
    });
    wx.request({
      url: 'https://weather01.market.alicloudapi.com/area-to-weather',
      header:{
        'Authorization': 'APPCODE b0eceff9476841588287706ca6819e6e'
      },
      data:{
        area: city,
        areaid: areaid,
        needAlarm: 1,
        needMoreDay: 1,
        need3HourForcast: 1,
        needIndex: 1
      },
      success: res=>{
        let weather = res.data.showapi_res_body;
        this.collatingWeather(weather);
      }
    })
  },

  /**
   * 整理天气信息，并保存在data
   */
  collatingWeather(weather){
    // 天气预警
    for(var i=0;i<weather.alarmList.length;i++){
      var time = weather.alarmList[i].issueTime;
      var gap = (new Date().getTime()-new Date(time).getTime())/1000/3600;
      if(weather.alarmList[i].signalType=='海上雷雨大风'){
        weather.alarmList[i].signalType='雷雨大风'
      }
      // 天气预警只显示24小时以内的
      if(gap>24){
        weather.alarmList.splice(i,1);
        i--;
      }
    }
    // 空气质量级别
    var aqi = weather.now.aqiDetail.aqi;
    weather.now.aqiDetail.level = aqi<0?'':aqi<=50?'Ⅰ':aqi<=100?'Ⅱ':aqi<=150?'Ⅲ':aqi<=200?'Ⅳ':aqi<=300?'Ⅴ':'Ⅵ';
    // 未来七天天气
    var fList = {};
    var weekday = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
    for(var j=1;j<=7;j++){
      // 日期格式改为mm-dd
      weather['f'+j].day=weather['f'+j].day.replace(/(\d{4})(\d{2})(\d{2})/,(a,b,c,d)=>c+'-'+d);
      // 星期几格式
      weather['f'+j].weekday = j==1?'今天':j==2?'明天':weekday[weather['f'+j].weekday-1];
      // 日期前两天
      weather['f'+j].day = j==1?'今天':j==2?'明天':weather['f'+j].day;
      // 每3小时格式 (2时-5时)=>(2-5时)
      for(var i in weather['f'+j]['3hourForcast']){
        weather['f'+j]['3hourForcast'][i].hour = weather['f'+j]['3hourForcast'][i].hour.replace(/时/,'');
      }
      // 天气指数
      var newIndex = {};
      newIndex['紫外线'] = weather['f'+j]['index'].uv;
      newIndex['空气质量'] = weather['f'+j]['index'].aqi;
      newIndex['穿衣指数'] = weather['f'+j]['index'].clothes;
      newIndex['晾晒指数'] = weather['f'+j]['index'].ls;
      newIndex['洗车指数'] = weather['f'+j]['index'].wash_car;
      weather['f'+j]['index'] = newIndex;
      fList['f'+j] = weather['f'+j];
    }
    this.setData({
      weather: weather,
      fList: fList
    });
    console.log(this.data.weather,this.data.fList);
  },

  /**
   * 今天白天-温度/风向切换
   */
  clickDay(){
    this.setData({
      dayFlag: !this.data.dayFlag
    })
  },
  /**
   * 今天夜间-温度/风向切换
   */
  clickNight(){
    this.setData({
      nightFlag: !this.data.nightFlag
    })
  },

  /**
   * 弹出城市列表
   */
  clickTop(e){
    // 捕获到搜索框
    if(e.target.dataset.name=='search'){
      if(e.target.id!='searchInput'){
        // 获取焦点
        this.setData({
          searchFocus: true
        });
      }
      // 阻止事件冒泡
      return;
    }
    // 收起列表
    if(this.data.scrollListFlag){
      // 处理安卓真机bug-隐藏input的同时移除焦点无效
      new Promise((resolve)=>{
        this.setData({
          searchFocus: false,
          
        });
        // 移除焦点100毫秒后再隐藏input
        setTimeout(resolve,100);
      }).then(()=>{
        this.setData({
          cityScrollList: Object.keys(this.data.cityList),
          cityScrollTop: 0,
          cityListType: '省级行政区',
          scrollListFlag: false,
          searchValue: '',
          clearSearchValue: ''
        });
      });
    }
    // 展开列表
    else{
      // 搜索框获得焦点
      this.setData({
        cityScrollTop: 0,
        scrollListFlag: true,
        searchFocus: true
      })
    }
  },

  /**
   * 选择城市
   */
  clickCity(e){
    // 从自定义组件获取detail
    var clickName = e.detail.clickName;
    if(!clickName) return;
    // 一级地名
    if(Object.keys(this.data.cityList).includes(clickName)){
      // 若存在搜索内容，清除高亮标记
      if(this.data.searchValue){
        this.setData({
          searchValue: ' '
        });
      }
      this.setData({
        cityScrollList: Object.keys(this.data.cityList[clickName]),
        cityScrollTop: 0,
        cityListType: '地级行政区'
      });
    }else{
      // 一级地名
      var first = null;
      for(var i in this.data.cityList){
        if(Object.keys(this.data.cityList[i]).includes(clickName)){
          first=i;
          break;
        }
      }
      // 二级地名
      if(first&&this.data.cityList[first][clickName].length>0){
          // 若存在搜索内容，清除高亮标记
          if(this.data.searchValue){
            this.setData({
              searchValue: ' '
            });
          }
          this.setData({
            cityScrollList: this.data.cityList[first][clickName],
            cityScrollTop: 0,
            cityListType: '县级行政区'
          });
      }
      // 三级地名（无三级地名的二级地名）
      else{
        // 处理安卓真机bug-隐藏input的同时移除焦点无效
        new Promise((resolve)=>{
          this.setData({
            searchFocus: false
          });
          // 移除焦点100毫秒后再隐藏input
          setTimeout(resolve,100);
        }).then(()=>{
          this.setData({
            city: clickName,
            cityScrollList: Object.keys(this.data.cityList),
            cityScrollTop: 0,
            cityListType: '省级行政区',
            hourScrollLeft: 0,
            selectDay: 'f1',
            scrollListFlag: false,
            searchValue: '',
            clearSearchValue: '',
            pageScrollTop: 0
          });
        });
        // 重新获取天气
        if(clickName=='河南蒙古族自治县'){
          this.getWeather(clickName,101150304);
        }else{
          this.getWeather(clickName);
        }
      }
    }
  },

  /**
   * 搜索框获得焦点时
   */
  searchFocus(){
    this.setData({
      searchFocus: true
    });
  },
  /**
   * 搜索框失去焦点时
   */
  searchBlur(){
    this.setData({
      searchFocus: false
    });
  },
  /**
   * 搜索框输入
   */
  searchInput(e){
    var value = e.detail.value;
    if(!value){
      this.setData({
        cityScrollList: Object.keys(this.data.cityList),
        cityScrollTop: 0,
        cityListType: '省级行政区',
        searchValue: ''
      });
    }else{
      var cityScrollList = [];
      this.setData({
        searchValue: value
      });
      // 一级地名
      for(var i in this.data.cityList){
        if(i.includes(value)) cityScrollList.push(i);
        // 二级地名
        for(var j in this.data.cityList[i]){
          if(j.includes(value)) cityScrollList.push(j);
          // 三级地名
          for(var k of this.data.cityList[i][j]){
            if(k.includes(value)) cityScrollList.push(k);
          }
        }
      }
      this.setData({
        cityScrollList: cityScrollList,
        cityScrollTop: 0,
        cityListType: '搜索结果'
      });
    }
    
  },

  /**
   * 空气质量详情-点击事件
   */
  clickAqi(e){
    this.setData({
      popUpShow: true,
      popUpType: 'aqi',
      popUpTitle: '空气质量详情',
      popUpData: this.data.weather.now.aqiDetail
    });
  },

  /**
   * 天气预警详情-点击事件
   */
  clickAlarm(e){
    this.setData({
      popUpShow: true,
      popUpType: 'alarm',
      popUpTitle: '天气预警详情',
      popUpData: this.data.weather.alarmList
    });
  },

  /**
   * 每3小时天气区-滚动事件
   */
  hourScroll(e){
    var query = wx.createSelectorQuery();
    query.select('.hourForcast .content').boundingClientRect();
    query.exec(res=>{
      // 获取容器宽度
      var contentWidth = res[0].width;
      // 显示区域索引
      var index = Math.floor((e.detail.scrollLeft+contentWidth/2)/contentWidth)+1;
      // 记录滚动位置
      this.setData({
        hourScrollL: e.detail.scrollLeft
      });
      // 当前不在进行滚动动画时，更新选择日期
      if(!this.data.hourScrollLeftOnScroll&&!this.data.hourOnScroll){
        this.setData({
          selectDay: 'f'+index
        });
      }
    });
  },

  /**
   * 未来七天天气区-点击事件
  
   */
  clickWeek(e){
    this.changeDay(e.currentTarget.dataset.day);
  },

  /**
   * 切换选择日期
   */
  changeDay(day){
    // 内置滚动动画，重复触发滚动时禁止切换天数
    clearTimeout(this.data.changeDayT);
    this.setData({
      hourOnScroll: true,
      changeDayT: setTimeout(()=>{
        this.setData({
          hourOnScroll: false
        })
      },600)
    });
    var query = wx.createSelectorQuery();
    query.select('.hourForcast .content').boundingClientRect();
    query.exec(res=>{
      // 获取容器宽度
      var contentWidth = res[0].width;
      // 更新选择天数
      this.setData({
        selectDay: day
      });
      var time = 400;// 缓动时间
      var left = this.data.hourScrollL;// 初始left
      var end = Math.max((day[1]-1)*contentWidth-contentWidth/8*3,0);// 目标 left
      // 滚动动画-缓动
      // app.animation(this,'hourScrollLeft',left,end,time,'easeInOut');
      // 使用内置滚动动画，须设置scroll-with-animation="true"，time=0.32s，ease=cubic-bezier(0.46, 0.03, 0.52, 0.96)
      this.setData({
        hourScrollLeft: end
      });
    });
  },
  
  /**
   * 天气指数区-触摸开始事件
   */
  indexTouchStart(e){
    this.setData({
      pageX: e.changedTouches[0].pageX
    });
  },

  /**
   * 天气指数区-触摸结束事件
   */
  indexTouchEnd(e){
    if(!this.data.selectDay) return;
    var moveX = e.changedTouches[0].pageX-this.data.pageX;
    if(moveX>30){
      var day = 'f'+Math.max(1,Number(this.data.selectDay[1])-1);
      if(day!=this.data.selectDay){
        this.changeDay(day);
      }
    }else if(moveX<-30){
      var day = 'f'+Math.min(7,Number(this.data.selectDay[1])+1);
      if(day!=this.data.selectDay){
        this.changeDay(day);
      }
    }
  },

  /**
   * 天气指数区-显隐开关
   */
  indexSwitch(e){
    this.setData({
      indexFlag: !this.data.indexFlag
    });
  },

  /**
   * 查询历史天气按钮
   */
  weatherHistory(){
    wx.navigateTo({
      url: '/pages/weatherHistory/weatherHistory?city='+this.data.city
    });
  },

  /**
   * 问题反馈按钮
   */
  feedback(){
    wx.navigateTo({
      url: '/pages/feedback/feedback'
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 初始化城市列表
    this.initCityList();
    // 用户授权获取地址
    this.authorize();
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0
      })
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})